<template>
  <div class="table-row-key-view">
    <div class="table-header">
      <el-button
        v-if="activeStudentList.length !== 0"
        type="primary"
        plain
        @click="getDownLodeData()"
        >下载选中项</el-button
      >
    </div>
    <div class="table-body">
      <div class="table-table">
        <div class="table-view">
          <el-table
            border
            height="100%"
            class="tableList"
            v-loading="isLoading"
            :data="studentData"
            row-key="id"
            @selection-change="getSelectionChange"
          >
            <el-table-column
              type="selection"
              align="center"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              min-width="120px;"
            >
            </el-table-column>

            <el-table-column prop="schoolName" label="校区名称" align="center">
            </el-table-column>
            <el-table-column prop="userid" label="用户id" align="center">
            </el-table-column>

            <el-table-column label="详情" align="left">
              <template slot-scope="scope">
                <el-popconfirm
                  @confirm="setDiscardItem(scope.row)"
                  title="您确认要下载该行信息吗？"
                >
                  <el-button slot="reference" class="color-red" type="text">
                    <el-divider direction="vertical"></el-divider
                    >下载</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="table-pagination">
        <el-pagination
          background
          @current-change="pageChange"
          @size-change="sizeChange"
          :current-page="pageIdx"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="totalNumber"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getStudentData, setDownLoadData } from "../requse.js";
export default {
  data() {
    return {
      isLoading: false,
      studentData: [],
      pageIdx: 1,
      pageSize: 10,
      totalNumber: 0,
      activeStudentList: [],
    };
  },
  created() {},
  mounted() {
    this.getStudetList();
  },
  methods: {
    getStudetList() {
      this.studentData = [];
      this.isLoading = true;
      let pageIdx = this.pageIdx - 1;
      let query = {
        pageIdx: pageIdx,
        pageSize: this.pageSize,
      };
      getStudentData(query)
        .then((res) => {
          let result = res.data;
          this.isLoading = false;
          if (res.code === 200) {
            this.studentData = result.content;
            this.totalNumber = result.totalRecords;
          }
        })
        .catch(() => {
          this.studentData = [];
          this.isLoading = false;
        });
    },
    pageChange(val) {
      this.pageIdx = val;
      this.getStudetList();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.pageIdx = 1;
      this.getStudetList();
    },
    setDiscardItem(row) {
      setDownLoadData({ title: `${row.name}-学生列表`, tableData: [row] });
    },
    getSelectionChange(val) {
      this.activeStudentList = val;
    },
    getDownLodeData() {
      setDownLoadData({ title: "学生列表", tableData: this.activeStudentList });
    },
  },
};
</script>

<style lang="scss" >
.table-row-key-view {
  height: 100%;

  display: flex;
  flex-direction: column;
  .table-header {
    padding: 30px;
    height: 100px;
    text-align: right;
    box-sizing: border-box;
  }
  .table-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-table {
      position: relative;
      flex: 1;
      .table-view {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
      }
    }
    .table-pagination {
      text-align: right;
      height: 50px;
    }
  }
}
</style>